과제 체크포인트

기본과제

가상돔을 기반으로 렌더링하기

• createVNode 함수를 이용하여 vNode를 만든다.
• normalizeVNode 함수를 이용하여 vNode를 정규화한다.
• createElement 함수를 이용하여 vNode를 실제 DOM으로 만든다.
• 결과적으로, JSX를 실제 DOM으로 변환할 수 있도록 만들었다.

이벤트 위임

• 노드를 생성할 때 이벤트를 직접 등록하는게 아니라 이벤트 위임 방식으로 등록해야 한다
• 동적으로 추가된 요소에도 이벤트가 정상적으로 작동해야 한다
• 이벤트 핸들러가 제거되면 더 이상 호출되지 않아야 한다

심화 과제

1) Diff 알고리즘 구현

• 초기 렌더링이 올바르게 수행되어야 한다
• diff 알고리즘을 통해 변경된 부분만 업데이트해야 한다
• 새로운 요소를 추가하고 불필요한 요소를 제거해야 한다
• 요소의 속성만 변경되었을 때 요소를 재사용해야 한다
• 요소의 타입이 변경되었을 때 새로운 요소를 생성해야 한다

2) 포스트 추가/좋아요 기능 구현

• 비사용자는 포스트 작성 폼이 보이지 않는다
• 비사용자는 포스트에 좋아요를 클릭할 경우, 경고 메세지가 발생한다.
• 사용자는 포스트 작성 폼이 보인다.
• 사용자는 포스트를 추가할 수 있다.
• 사용자는 포스트에 좋아요를 클릭할 경우, 좋아요가 토글된다.

과제 셀프회고

• 리액트 기초 강의에서 vNode처럼 생긴걸 보긴했는데, 아직도 이해가 잘 안된다. 무엇보다 사용자가 Node를 어떤 식으로 만드는지 모르니 더 답답했다. 리액트 기초 개념이 준비가 안 되었다는 생각을 했다.
  gpt통해서 각각의 함수가 왜 필요한 것인지에 대해서 묻고 답을 얻었지만 막연하게 느껴졌다.
  문제설명이 없는 코테를 푸는 느낌..
• 어려운게 리액트를 잘 몰라서인지 과제 이해도가 떨어져서인지 잘 모르겠다.
• 코드를 쓰는 것보다 vNode에 왜 boolean값이 들어오나..같은 질문을 더 많이 한 것 같다.
• 그래도 하다 보니까 점점 문제 의도가 빨리 읽혔다.

기술적 성장

• 평탄화 개념과 목적 이해
• 전 주차에 막연하게 느껴졌던 재귀 호출을 좀 더 제대로 이해한 느낌.
• 가상DOM과 실제 DOM의 차이. 가상 DOM을 만드는 이유 이해
• 이벤트의 버블링 이슈 구경
• 스벨트를 쓰면서 가상 돔을 쓰지 않는다는게 무슨 뜻인지 잘 몰랐는데, 이제 왜 스벨트가 다른 프레임워크에 비해 빠르다고 했는지 알게되었다.
• vue에서도 이벤트를 여러 번 부르면서 전역변수를 이상하게 변형시키는 이슈가 있었는데, 이게 단순히 선임들의 코드 문제가 아니라 모든 FE 환경에서 많이들 겪는 이슈라는 것을 느꼈다. 다들 어려워 하는가보다. 아직 진도가 거기까지 안 나가서 다른 사람들의 해결법을 봐도 이해가 잘 안되는데 언젠가는 습득을 해서 회사 프로그램에 적용하면 좋겠다.

코드 품질

• 리팩토링이 필요한 부분 - 전체적
• 코드 설계 관련 고민과 결정 - 진도가 안나가니 너무 완성에만 치중해서 한 것 같다.

학습 효과 분석

• 추가 학습이 필요한 영역 : React에서 DOM을 생성하는 방식. 혹은 리액트 사용법

과제 피드백

리뷰 받고 싶은 내용

• 이정도 이해도라면… 다음 클린코드 챕터를 듣기 어려울까요? 리액트를 너무 모르는 것 같은데 과제와 리액트 공부를 병행하려니 쉽지 않아 과정을 계속 듣는게 맞는지 고민이 됩니다ㅠ 과제를 다 완성하진 못해도 요구사항의 목적을 알아내기 위해 글도 읽고 답변도 얻으면서 배우는 건 있는 것 같은데 다른 사람들에 비해 많이 얻어가지 못하는 것 같아요.